<template>
  <div>
    <div class="time">
      <div class="turn"> 第{{stage}}轮</div>
      <img src="/static/questions/img/nz.png">
      <span>{{showTimer}}</span>
    </div>
    <div class="tit">第1题</div>
    <div class="que">某中学有高中生3500人，初中生1500人，为了解学生的学习情况，学科网用分层抽样的方法从该校学生中抽取一个容量为 的样本，已知从高中生中抽取70人，则为（ ）</div>
    <div><input class="input" type="radio" name="awe" id="A" value="A" checked>
      <label class="awe" for="A"><span>A</span>100</label>
    </div>
    <div><input class="input" type="radio" name="awe" id="B" value="B">
      <label class="awe" for="B"><span>B</span>200</label>
    </div>
    <div><input class="input" type="radio" name="awe" id="C" value="C">
      <label class="awe" for="C"><span>C</span>300</label>
    </div>
    <div><input class="input" type="radio" name="awe" id="D" value="D">
      <label class="awe" for="D"><span>D</span>400</label>
    </div>
    <div class="btn" v-show="currentQuestionIndex<9" @click="nextQuestion">下一题</div>
    <div class="btn" v-show="currentQuestionIndex>=9">提交答案</div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { Indicator } from 'mint-ui'
  import api from '../../api/http.js'
  import url from '../../api/urlConst.js'
  import { config } from '../../common/js/weChat/service.js'

  export default {
    components: {},
    data () {
      return {
        checkedOption:'A',
        stage:1,
        showTimer: '0时0分0秒',
        timerData: {
          hour: 0,
          minute: 0,
          second: 0,
          millisecond: 0,
        },
        indexList: [],
        questionsList: [],
        answerList: [{
          questionId: 0,
          option: 'A',
        }],
        currentQuestionIndex: 0,
        currentQuestion: {},

      }
    },
    created () {
      setInterval(this.timerF, 1000)
      this.getAnswerPage

    },
    methods: {
      getAnswerPage () {
        Indicator.open()
        api.post(url.questions.answerPage).then((res) => {
          setTimeout(()=>{Indicator.close()},300)
          if (res.success) {
            this.questionsList = res.data.questionsList
            this.stage = res.data.stage
          }
        })
        setTimeout(()=>{Indicator.close()},300)
      },

      nextQuestion () {

        if($("#A").is(':checked') === true){
         this.checkedOption = $("#A").val()
        }
        if($("#B").is(':checked') === true){
          this.checkedOption = $("#B").val()
        }
        if($("#C").is(':checked') === true){
          this.checkedOption = $("#C").val()
        }
        if($("#D").is(':checked') === true){
          this.checkedOption = $("#D").val()
        }

        if (this.currentQuestionIndex >= 9) {
          //提交答案
          this.commitAnswer()
        }
        //记录答案
        this.answerList.push({
          questionId: this.questionsList[this.currentQuestionIndex].id,
          option: this.checkedOption,
        })

        this.currentQuestionIndex = this.currentQuestionIndex + 1
        this.currentQuestion = this.questionsList[this.currentQuestionIndex]
      },
      commitAnswer () {
        let parameter = {
          answerListStr: JSON.stringify(this.answerList),
          costTime:this.timerData.millisecond
        }
        Indicator.open()
        api.post(url.questions.commitAnswer, parameter).then((res) => {
          setTimeout(()=>{Indicator.close()},300)
          if (res.success) {
            //跳转分数页面
          }
        })
        setTimeout(()=>{Indicator.close()},300)
      },
      timerF () {
        this.timerData.millisecond =this.timerData.millisecond +1000
        /* if(this.timerData.millisecond>=1000)
         {
           this.timerData.millisecond=0;
           this.timerData.second= this.timerData.second+1;
         }*/
        this.timerData.second = this.timerData.second + 1
        if (this.timerData.second >= 60) {
          this.timerData.second = 0
          this.timerData.minute = this.timerData.minute + 1
        }

        if (this.timerData.minute >= 60) {
          this.timerData.minute = 0
          this.timerData.hour = this.timerData.hour + 1
        }
        this.showTimer = this.timerData.hour + '时' + this.timerData.minute + '分' + this.timerData.second + '秒'
      },
    }
  }
</script>

<style scoped>
  .time {
    width: 100%;
    text-align: center;
    height: 2.5rem;
    box-shadow: 0px 2px 4px 0px rgba(228, 228, 228, 0.5);
    margin-bottom: 1.5rem;
    color: #FF4587;
    position: relative;
    font-size: 18px;
    line-height: 2.5rem
  }

  .time img {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -4px;
  }

  .turn {
    width: 2.5rem;
    height: 1.15rem;
    background-color: #FF4587;
    color: #fff;
    text-align: center;
    line-height: 1.15rem;
    position: absolute;
    top: 0.7rem;
    left: 1rem;
    font-size: 14px;
    border-radius: 2px;
  }

  .tit {
    text-align: center;
    font-size: 16px;
    line-height: 1.1rem;
    margin-bottom: 0.7rem;
    color: #FF4587;
    font-weight: bold;
  }

  .que {
    width: 89.33%;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.05rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }

  .awe {
    display: block;
    width: 78.66%;
    height: 2rem;
    border-radius: 1rem;
    border: 1px solid #979797;
    line-height: 2rem;
    font-size: 14px;
    margin: 0 auto;
    margin-bottom: 0.6rem;
    box-sizing: border-box;
  }

  .awe span {
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.85rem;
    margin-right: 0.6rem;
    font-weight: bold;
    margin-top: -4px;
  }

  .input {
    display: none;
  }

  .btn {
    display: block;
    width: 89.33%;
    height: 2.2rem;
    line-height: 2.2rem;
    background-color: #FF4587;
    border-radius: 1.1rem;
    font-size: 18px;
    text-align: center;
    color: #fff;
    border: 0;
    margin: 3.5rem auto;
  }

  input:checked + label {
    border: 1px solid #4591FF;
    background-color: #4591FF;
    color: #fff;
  }


</style>
